<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            box-shadow: 0 0 3px 0 #666;
            width: 1000px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <input type="text" name="user" id="user">
    <button class="btn">点我啊</button>
    <div class="box">

    </div>

    <script>
        document.querySelector(".btn").onclick = () => {
            document.querySelector(".box").innerHTML = ""
            let xhr = new XMLHttpRequest();

            let ii = document.querySelector("#user");
            let iii = "user=" + ii.value;
            xhr.open("post", "./3.php");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(iii);
            let xm = "";
            xhr.onreadystatechange = () => {
                console.log(xhr.responseText)
                if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {

                    // console.log(xhr.responseText.error_code)
                    if (!xhr.responseText.error_code) {
                        xm = (JSON.parse(xhr.responseText)).result.data;
                        console.log(xm)
                        document.querySelector(".box").innerHTML += `
                    <li>
                        <p>日期:${xm.pm25.dateTime}</p>
                        <p>地方:${xm.pm25.key}</p>
                        <p>空气质量:${xm.pm25.pm25.quality}</p>
                        <p>风力:${xm.realtime.wind.power} 风向:${xm.realtime.wind.direct}</p>
                        <p>小贴士:</p>
                        <ul class="info">`+ aa(xm.life.info) + `
                    </ul>

                    </li>
                `

                    } else {
                        alert("查询错误")
                    }

                }
            }
        }

        function aa(bb) {
            // console.log(bb)
            let re = ""
            for (let a in bb) {
                re += "<li>"
                bb[a].forEach((item, index) => {
                    re = re + item
                })
                re += "</li>"
            }
            return re
        }


    </script>

</body>

</html>